<template>
<div>

  <!--页面头-->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <a class="navbar-brand" href="#">学生选课管理</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><router-link :to="{path:'/Course'}" replace>课程管理</router-link></li>
          <li><router-link :to="{path:'/Login'}" replace>学生管理</router-link></li>
          <li><router-link :to="{path:'/coursemage'}" replace>选课管理</router-link></li>
          <li><router-link :to="{path:'/Stucou'}" replace>选课明细表</router-link></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
  <!--页面表头结尾-->

  <!--搜索框-->
  <form class="form-inline">
    <div class="form-group">
      <input type="text" id="stuId" class="form-control" oninput = "value=value.replace(/[^\d]/g,'')" v-model="StuNoId"  placeholder="输入学号">
    </div>
    <button type="button" @click="queryStudentById" class="btn btn-default glyphicon glyphicon-search" ></button>
  </form>
  <!--搜索框尾端-->
  <table class="table table-hover">
    <thead>
    <th colspan="6"></th>
    </thead>
    <tr>
      <td v-text="student.sid"></td>
      <td v-text="student.sname"></td>
      <td v-text="student.smajor"></td>
      <td v-text="student.sdate"></td>
      <td v-text="student.sremark"></td>
      <td></td>
    </tr>
  </table>
  <p align="center" v-text="stuShow"></p>
  <!--下拉框-->
  <form class="form-inline">
    <div class="form-group">
      <!--下拉框-课程 -->
      <select class="form-control" id="selOption" style="width: 200px" v-model="courseId">
        <option v-for="c in courseList" :value="c.cid" v-text="c.cname"></option>
      </select>
    </div>
    <button type="button" class="btn btn-default glyphicon glyphicon-plus"  @click="addStuCourse"></button>
  </form>
  <!--下拉框尾端-->
  <table class="table table-hover">
    <thead>
    <th colspan="6"></th>
    </thead>
    <tr v-for="(cl,index) in courseStuList">
      <td v-text="cl.cid"></td>
      <td v-text="cl.cname"></td>
      <td v-text="cl.cnum"></td>
      <td v-text="cl.ctime"></td>
      <td v-text="cl.cremark"></td>
      <td>
        <button type="button" class="btn btn-default  glyphicon glyphicon-tags" @click="removeCourse_t(cl.cid)"  data-toggle="modal" data-target="#myModalAdd" style="background-color: gainsboro">
          删除
        </button>
      </td>
    </tr>
    <tr v-for="(fkcl,index) in falsecourseStuList">
      <td v-text="fkcl.cid"></td>
      <td v-text="fkcl.cname"></td>
      <td v-text="fkcl.cnum"></td>
      <td v-text="fkcl.ctime"></td>
      <td v-text="fkcl.cremark"></td>
      <td>
        <button type="button" class="btn btn-default  glyphicon glyphicon-tags" @click="removeCourse_f(index)"  data-toggle="modal" data-target="#myModalAdd" style="background-color: gainsboro">
          删除
        </button>
      </td>
    </tr>
  </table>
  <!-- 底部 -->
  <div class="navbar navbar-default navbar-fixed-bottom">
    <div style="float: right;margin-top: 8px;margin-right: 5px">
      <button type="button" id="save" class="btn btn-primary  glyphicon glyphicon-plus-sign" @click="save"  data-toggle="modal" data-target="#myModalAdd" style="background-color: black">
        保存
      </button>
      <button type="button" class="btn btn-primary  glyphicon glyphicon-minus-sign"  @click="quxiao" style="background-color: black">
        取消
      </button>
    </div>
  </div>
  <!--页面低端尾-->

</div>
</template>

<script>
export default {
  name: "coursemage",
  data(){
    return{
      //存储课程名称信息
      courseList:[],

      //查询存储学号iD
      StuNoId:"",
      //存储学生信息
      student:{
        sid:"",
        sname:"",
        smajor:"",
        sdate:"",
        sremark:""
      },
      //存储学生已报名的课程信息
      courseStuList:[],
      //存储假数据学生报名课程信息
      falsecourseStuList:[],
      stuShow:"",

      //存储学生选课添加课程id
      courseId:"",

      //课程信息存储
      course:{
        cid:"",
        cname:"",
        cnum:"",
        ctime:"",
        cremark:""
      }
    }
  },
  created() {
    this.getCourseList();
    $("#save").toggle(false);
  },

  methods: {
    //取消
    quxiao(){
      this.falsecourseStuList=[];
    },
    //选课管理学生添加课程数据信息
    save(){
      if($("#stuId").val()=="" || $("#selOption").val()==null){
        return;
      }
      console.log("学生id:"+this.StuNoId);
      let fscs = this.falsecourseStuList;
      let fsCstuCid = [];
      for (var i=0;i<fscs.length;i++){
        console.log("课程id:"+fscs[i].cid);
        fsCstuCid.push(fscs[i].cid);
      }

      this.axios.get('http://localhost:8003/coursemanage/save',{
        params:{
          "StuNoId":this.StuNoId,
          "fsCstuCid":fsCstuCid
        }
      }).then(response => {
        alert("保存成功!");
        this.queryStudentById();
        console.log(response);
      });

    },
    //选择课程添加操作
    addStuCourse(){
      //数据查询得到的数据
      let stu_cou = this.courseStuList;
      //假数据
      let false_stu_cou = this.falsecourseStuList;
      for (var i = 0;i<stu_cou.length;i++){
        if(stu_cou[i].cid==this.courseId){
          alert("该学生已存在此课程");
          return;
        }
      }
      //假数据判断
      for (var i = 0;i<false_stu_cou.length;i++){
        if(false_stu_cou[i].cid==this.courseId){
          alert("该学生已存在此课程");
          return;
        }
      }
      this.axios.get('http://localhost:8003/coursemanage/querycourse',{
        params:{
          "courseId":this.courseId
        }
      }).then(response => {
        let obj = response.data[0];
        console.log(obj.cid+"hhhhh");
        this.course.cid = obj.cId;
        this.course.cname = obj.cName;
        this.course.cnum = obj.cNum;
        this.course.ctime = obj.cTime;
        this.course.cremark = obj.cRemark;
        console.log(this.course.cname+"===========================");
        this.falsecourseStuList.push(this.course);
      });

      this.course={};
    },
    //删除真数据学生课程
    removeCourse_t(cid){
      let con=confirm("确定要删除此课程吗?");
      if(con==true){
        this.axios.get('http://localhost:8003/coursemanage/delete',{
          params:{
            "StuNoId":this.StuNoId,
            "courseId":cid
          }
        }).then(response => {
          console.log(response);
          this.queryStudentById();
        });
      }
    },
    //删除假数据学生课程
    removeCourse_f(cid){
      this.falsecourseStuList.splice(cid,1);
    },
    //根据学生学号查询学生
    queryStudentById(){
      this.axios.get('http://localhost:8003/coursemanage/selstunoid',{
        params:{
          "StuNoId":this.StuNoId
        }
      }).then(response => {
        console.log(response);
        let obj = response.data[0];
        this.$nextTick(function () {
          if(obj!=null){
            $("#save").toggle(true);
            this.stuShow="";
            this.student.sid = obj.sid;
            this.student.sname = obj.sname;
            this.student.smajor = obj.smajor;
            this.student.sdate = obj.sdate;
            this.student.sremark = obj.sremark;
            // //查询得到学生后，在查询学生所报名课程
            this.axios.get('http://localhost:8003/coursemanage/queryStuBycourse',{
              params:{
                "stuNoId":this.student.sid
              }
            }).then(response => {
              console.log(response);
              console.log(this.student.sid);
              this.courseStuList = response.data;
            });
          }else{
            this.stuShow="暂无此学生信息";
            $("#save").toggle(false);
          }
        });
        //学生信息数据清空
        this.student=[];
        //学生所选课程信息清空
        this.courseStuList=[];
        //清空假数据
        this.falsecourseStuList=[];
      });

    },
    getCourseList() {
      this.axios.get('http://localhost:8003/coursemanage/selcourse').then(response => {
        console.log(response);
        this.courseList = response.data;
      });
    }
  }
}
</script>

<style scoped>

</style>
